<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>mywifi</title>
		<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<!-- <script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script> -->
		<script src="./qrcode.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="./html2canvas.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" href="./mywifi.css?v=1.1">
	</head>
	<body>
		<div id="app">
			<div class="section info">
				<div class="form-wrap">
					<div class="form-item">
						<!-- <div class="form-item-til">WiFi名称</div> -->
						<div class="group">      
						  <input type="text" required v-model.trim="wifiName" @change="wifiNameChange" />
						  <span class="highlight"></span>
						  <span class="bar"></span>
						  <label>WiFi名称</label>
						</div>
						<!-- <input type="" name="" id="" v-model="wifiName" @change="wifiNameChange" /> -->
					</div>
					<div class="form-item">
						<!-- <div class="form-item-til">WiF密码</div>
						<input type="" name="" id="" v-model="wifiPass" @change="wifiNameChange" /> -->
						<div class="group">
						  <input type="text" required v-model.trim="wifiPass" @change="wifiNameChange" />
						  <span class="highlight"></span>
						  <span class="bar"></span>
						  <label>WiFi密码</label>
						</div>
					</div>
					<div class="form-item">
						<!-- <div class="form-item-til">底部文字</div>
						<input type="" name="" id="" v-model="bottomText" @change="wifiNameChange" /> -->
						<div class="group">
						  <input type="text" required v-model="bottomText" @change="wifiNameChange" />
						  <span class="highlight"></span>
						  <span class="bar"></span>
						  <label>底部文字</label>
						</div>
					</div>
					<div class="btn-wrap">
						<div class="btn" @click="print">打印</div>
						<div class="btn" @click="download">下载</div>
					</div>
				</div>
				<!-- form-wrap end -->
				<div class="introduce">
					<div class="title">项目介绍</div>
					<ul class="content">
						<li>这个网站可以生成包含你的WiFi信息和可供手机扫描连接WiFi的二维码。你只需要在👆上面的表格输入WiFi信息，就可以 🖨打印或者下载图片了。</li>
						<li>可以让你用手机或者平板自带的相机，一步到位连接WiFi，省去了寻找WiFi，输入密码等等繁杂的手续。</li>
						<li>网站不会搜集你的wifi信息，请放心使用。</li>
						<li>
							你可以设置打印结果中
							<span class="tool-btn" @click="hidePass">隐藏密码</span>,或者
							<span class="tool-btn" @click="showPass">显示密码</span>
						</li>
					</ul>
				</div>
				<!-- introduce end -->
			</div>
			<!-- info(left) end -->
			<div class="section preview">
				
				<div class="preview-wrap" id="capture">
					<svg id="svg-sign" style="height: 100%; width:100%;position: absolute;left: 0;top: 0;z-index: -1;" height="100%" width="100%" viewBox="0 0 480 621" fill="none" xmlns="http://www.w3.org/2000/svg">
						<g>
							<rect width="480" height="621" fill="white"></rect>
							<path fill-rule="evenodd" clip-rule="evenodd" d="M197.924 53.9119C187.377 43.3627 169.547 43.3627 159 53.9119L162.262 57.1738C171.044 48.3916 185.879 48.3916 194.662 57.1738L197.924 53.9119ZM191.543 60.8671C188.113 57.4345 183.467 55.5452 178.461 55.5452C173.455 55.5452 168.809 57.4345 165.379 60.8671L168.64 64.129C171.201 61.5684 174.687 60.1566 178.461 60.1566C182.235 60.1589 185.72 61.5684 188.281 64.129L191.543 60.8671ZM183.074 69.3863C183.074 71.9344 181.009 74 178.461 74C175.913 74 173.847 71.9344 173.847 69.3863C173.847 66.8382 175.913 64.7726 178.461 64.7726C181.009 64.7726 183.074 66.8382 183.074 69.3863Z" fill="black"></path>
							<path d="M436.375 307.806L449.353 311.314C451.02 311.765 452.684 310.809 453.135 309.142L459.057 287.234C459.507 285.567 458.551 283.903 456.884 283.452L443.906 279.944L416.997 272.671L404.018 269.163C402.351 268.712 400.687 269.668 400.237 271.335L394.315 293.243C393.864 294.91 394.82 296.574 396.487 297.025L409.466 300.533" stroke="#DDDDDD" stroke-width="1.652" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
							<path d="M438.467 300.067L411.557 292.793L406.955 309.82L433.865 317.094L438.467 300.067Z" stroke="#DDDDDD" stroke-width="1.652" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
							<path d="M445.354 274.586L418.445 267.313L416.964 272.79L443.874 280.063L445.354 274.586Z" stroke="#DDDDDD" stroke-width="1.652" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
							<path d="M449.64 289.927L451.426 290.41" stroke="#DDDDDD" stroke-width="1.652" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
							<path d="M448.643 293.618L450.429 294.101" stroke="#DDDDDD" stroke-width="1.652" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
							<path d="M381.347 237.554C381.625 237.462 381.776 237.163 381.685 236.885C381.593 236.607 381.294 236.456 381.016 236.547C380.738 236.639 380.587 236.938 380.679 237.216C380.77 237.494 381.069 237.645 381.347 237.554Z" stroke="#DDDDDD" stroke-width="1.652" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
							<path d="M389.803 238.117L374.71 243.083C372.949 243.662 371.054 242.705 370.475 240.944L360.048 209.248C359.469 207.487 360.426 205.593 362.186 205.013L377.28 200.048C379.041 199.469 380.935 200.426 381.515 202.186L391.941 233.883C392.521 235.644 391.564 237.538 389.803 238.117Z" stroke="#DDDDDD" stroke-width="1.652" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
							<path d="M368.405 206.685L373.101 205.14" stroke="#DDDDDD" stroke-width="1.652" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
							<path d="M369.652 237.312L390.615 230.416" stroke="#DDDDDD" stroke-width="1.652" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
							<path d="M79.635 316.644C79.956 316.727 80.2829 316.533 80.3653 316.212C80.4476 315.891 80.2541 315.564 79.9331 315.482C79.6121 315.4 79.2852 315.593 79.2029 315.914C79.1205 316.235 79.314 316.562 79.635 316.644Z" stroke="#DDDDDD" stroke-width="1.652" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
							<path d="M94.5496 324.909L62.6809 316.736C60.6467 316.214 59.4223 314.145 59.944 312.111L71.5948 266.681C72.1165 264.647 74.1855 263.422 76.2197 263.944L108.088 272.117C110.123 272.639 111.347 274.708 110.825 276.742L99.1744 322.172C98.6528 324.206 96.5837 325.43 94.5496 324.909Z" stroke="#DDDDDD" stroke-width="1.652" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
							<path d="M88.2283 271.463L93.5559 272.829" stroke="#DDDDDD" stroke-width="1.652" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
							<path d="M61.7723 306.592L100.228 316.454" stroke="#DDDDDD" stroke-width="1.652" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
							<path d="M34.6845 192.666L33.4106 196.516" stroke="#DDDDDD" stroke-width="1.652" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
							<path d="M40.5065 190.939L36.6465 201.475" stroke="#DDDDDD" stroke-width="1.652" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
							<path d="M96.5384 201.125L39.6654 228.081L23.5031 193.981C22.4751 191.812 23.3624 189.326 25.5313 188.298L74.8132 164.94C76.9821 163.912 79.4685 164.799 80.4965 166.968L96.6589 201.067L96.5384 201.125Z" stroke="#DDDDDD" stroke-width="1.652" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
							<path d="M99.5841 206.616L42.1087 233.858C38.7349 235.457 34.6311 234.894 30.9899 232.193L105.334 196.955C105.063 201.364 102.958 205.017 99.5841 206.616Z" stroke="#DDDDDD" stroke-width="1.652" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
							<path d="M402.15 121.574L398.169 123.649" stroke="#DDDDDD" stroke-width="1.652" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
							<path d="M408.054 124.403L397.107 130.109" stroke="#DDDDDD" stroke-width="1.652" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
							<path d="M441.422 178.307L383.135 159.96C380.864 159.246 379.653 156.923 380.368 154.652L392.838 115.037C393.552 112.766 395.875 111.556 398.145 112.271L456.433 130.617C458.704 131.332 459.914 133.654 459.199 135.925L446.73 175.541C445.929 177.646 443.567 178.982 441.422 178.307Z" stroke="#DDDDDD" stroke-width="1.652" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
							<path d="M413.906 163.961C414.325 164.093 414.77 163.86 414.902 163.442C415.033 163.024 414.801 162.579 414.383 162.447C413.965 162.316 413.519 162.548 413.388 162.966C413.256 163.384 413.488 163.829 413.906 163.961Z" stroke="#DDDDDD" stroke-width="1.652" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
							<path d="M417.634 181.635L400.602 176.274L405.552 167.155L418.925 171.365L417.634 181.635Z" stroke="#DDDDDD" stroke-width="1.652" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
							<path d="M396.691 175.043L421.545 182.866" stroke="#DDDDDD" stroke-width="1.652" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
							<path d="M382.671 147.335L448.907 168.183" stroke="#DDDDDD" stroke-width="1.652" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
							<path d="M119.424 118.805C116.824 114.248 113.009 108.025 109.311 103.157C105.857 98.622 99.1141 98.2236 95.1025 102.437L93.7343 103.855C92.9951 104.693 92.0506 105.292 91.031 105.705L86.1185 107.694C85.099 108.107 84.0043 108.334 82.8898 108.246L81.0138 108.143C75.2932 107.87 70.6349 112.885 71.309 118.546C72.0405 124.615 73.6682 131.832 74.9336 136.822C75.5763 139.474 79.1253 139.979 80.5639 137.67C82.6115 134.468 84.8046 130.559 85.8304 127.23C86.3068 125.743 87.472 124.624 89.03 124.208C90.9964 123.736 92.9804 123.04 94.9269 122.252C96.966 121.426 98.8374 120.453 100.616 119.517C102.024 118.731 103.64 118.724 105.017 119.461C108.069 121.138 112.457 122.382 116.064 123.295C118.611 123.99 120.716 121.195 119.424 118.805Z" stroke="#DDDDDD" stroke-width="1.652" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
							<path d="M78.8152 119.498L84.0985 117.359" stroke="#DDDDDD" stroke-width="1.652" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
							<path d="M80.4522 115.814L82.5917 121.098" stroke="#DDDDDD" stroke-width="1.652" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
							<path d="M102.822 109.777L103.656 109.439" stroke="#DDDDDD" stroke-width="1.652" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
							<path d="M97.9091 111.766L98.7433 111.428" stroke="#DDDDDD" stroke-width="1.652" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
							<path d="M101.646 112.734L101.946 113.476" stroke="#DDDDDD" stroke-width="1.652" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
							<path d="M99.6564 107.822L99.9567 108.563" stroke="#DDDDDD" stroke-width="1.652" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
							<path d="M88.5836 106.588C88.5836 106.588 88.2121 102.207 84.2105 100.051C78.9242 97.1212 83.2048 90.6407 83.2048 90.6407" stroke="#DDDDDD" stroke-width="1.652" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
						</g>
					</svg>
					<div class="wifi-title">WIFI</div>
					<div id="qrcode" ref="qrCodeUrl"></div>
					<div class="tip">
						要连接WiFi，请用手机或平板自带的相机扫描二维码。<br>其他设备请用下方的WiFi名称和密码连接。
					</div>
					<div class="wifi-info" v-show="switchShowPass">
						<div class="wifi-info-item">
							<div class="wifi-info-til">wifi名称</div>
							<div class="wifi-info-con">{{wifiName}}</div>
						</div>
						<div class="wifi-info-item">
							<div class="wifi-info-til">wifi密码</div>
							<div class="wifi-info-con">{{wifiPass}}</div>
						</div>
					</div>
					<div class="bottom-text">{{bottomText}}</div>
				</div>
				<div class="img-wrap" id="printContent">
					<img :src="canvasurl" alt="">
				</div>
			</div>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					wifiName: '蹭网可以,一小时两块钱',
					wifiPass: '123456789',
					canvasurl: '',
					canvas:null,
					bottomText:'book.momen.vip',
					switchShowPass:true,
				},
				created() {
					let storageName = localStorage.getItem("wifiName");
					let storagePass = localStorage.getItem("wifiPass");
					if(storageName){this.wifiName=storageName};
					if(storagePass){this.wifiPass=storagePass};
				},
				mounted() {
					// debugger;
					
					this.creatQrCode();
					// console.log('html2canvas',html2canvas)
				},
				methods: {
					creatQrCode() {
						let storage = window.localStorage;
						document.getElementById("qrcode").innerHTML = "";
						var qrcode = new QRCode(this.$refs.qrCodeUrl, {
							text: this.qrtext,
							width: 190,
							height: 190,
							colorDark: '#000000',
							colorLight: '#ffffff'
						});
						html2canvas(document.querySelector("#capture")).then(canvas => {
						    console.log('document.querySelector("#capture")',document.querySelector("#capture"))
							this.canvas = canvas;
							this.canvasurl = canvas.toDataURL(); //图片地址
							storage.setItem('wifiName',this.wifiName);
							storage.setItem('wifiPass',this.wifiPass);
						}).catch((err)=>{
							console.log('html2canvas err',err)
						});
					},
					wifiNameChange() {
						this.creatQrCode();
					},
					//下载图片
					download() {
						let imgData = this.canvasurl;
						this.downloadFile('mywifi.png', imgData);
					},
					//下载
					downloadFile(fileName, content) {
						let aLink = document.createElement('a');
						let blob = this.base64ToBlob(content); //new Blob([content]);

						let evt = document.createEvent("HTMLEvents");
						evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
						aLink.download = fileName;
						aLink.href = URL.createObjectURL(blob);

						// aLink.dispatchEvent(evt);
						//aLink.click()
						aLink.dispatchEvent(new MouseEvent('click', {
							bubbles: true,
							cancelable: true,
							view: window
						})); //兼容火狐
					},
					//base64转blob
					base64ToBlob(code) {
						let parts = code.split(';base64,');
						let contentType = parts[0].split(':')[1];
						let raw = window.atob(parts[1]);
						let rawLength = raw.length;

						let uInt8Array = new Uint8Array(rawLength);

						for (let i = 0; i < rawLength; ++i) {
							uInt8Array[i] = raw.charCodeAt(i);
						}
						return new Blob([uInt8Array], {
							type: contentType
						});
					},
					// 打印
					print(){
						let newstr = document.getElementById("printContent").innerHTML;
					    let oldstr = document.body.innerHTML;
					    document.body.innerHTML = newstr;
					    window.print();
					    document.body.innerHTML = oldstr;
						window.location.reload();
					    return false
						
						// console.log('this.canvas',this.canvas)
						//  window.print(this.canvas);
					},
					hidePass(){
						if(!this.switchShowPass){
							console.log('现在是隐藏的')
							return
						}
						this.switchShowPass = false;
						console.log('this.switchShowPass',this.switchShowPass);
						this.$nextTick(() => {
						  this.wifiNameChange();
					    });
						
					},
					showPass(){
						if(this.switchShowPass){
							console.log('现在是显示的')
							return
						}
						this.switchShowPass = true;
						this.$nextTick(() => {
						  this.wifiNameChange();
						});
						
					}

				},
				computed: {
					qrtext() {
						return 'WIFI:S:' + this.wifiName + ';T:' + 'WPA' + ';P:' + this.wifiPass + ';'
					}
				},
			});
		</script>
	</body>
</html>
